<template>
  <el-dialog
    title="绘本详情"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div style="margin: 0 30px;" class="content">
      <div style="display: flex;margin-bottom: 15px;">
        <img v-if="dataForm.coverImg" :src="dataForm.coverImg" class="coverImg">
        <i v-else class="el-icon-plus coverImg-uploader-icon"></i>
        <div style="margin-left: 40px;">
          <div><span class="tip">绘本编号：</span>{{dataForm.id}}</div>
          <div><span class="tip">绘本名称：</span>{{dataForm.name}}</div>
          <div><span class="tip">绘本类型：</span>{{showTypeName}}</div>
          <div><span class="tip">绘本分类：</span>{{dataForm.contentTypeName}}</div>
          <div><span class="tip">绘本状态：</span>{{dataForm.status==1?'上架':'下架'}}</div>
        </div>
      </div>
      <div>
        <div class="tip">绘本简介:</div>
        <div class="summary">{{dataForm.summary}}</div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
       <el-button type="success" @click="updateClick">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        id: '',
        instantClose: true,//从列表新增获取修改跳转过来的，点击该页面修改按钮直接关闭当前弹窗
        dataForm: {
          code: '',
          name: '',
          showType: 0,
          contentType: 1,
          pricePkg: '',
          priceVip: '',
          pricePkgVip: '',
          coverImg: '',
          bannerImg: '',
          itemCount: '',
          status: 1,
          summary: '',
          remark: ''
        },
      }
    },
    watch: {
      visible (val) {
        if (!val) {
          this.dataForm = {
            code: '',
            name: '',
            showType: 0,
            contentType: 1,
            pricePkg: '',
            priceVip: '',
            pricePkgVip: '',
            coverImg: '',
            bannerImg: '',
            itemCount: '',
            status: 1,
            summary: '',
            remark: ''
          }
        }
      }
    },
    computed: {
      showTypeName () {
        var ret = ''
        switch (this.dataForm.showType) {
          case 0:
            ret = '普通绘本'
            break
          case 1:
            ret = '互动绘本'
            break
          case 2:
            ret = '精读绘本'
            break
          case 3:
            ret = '配音绘本'
            break
        }
        return ret
      },
      contentTypeName () {
        var ret = ''
        switch (this.dataForm.contentType) {
          case 1:
            ret = '情商培养'
            break
          case 2:
            ret = '国学'
            break
          case 3:
            ret = '逻辑思维'
            break
          case 99:
            ret = '其他'
            break
        }
        return ret
      }
    },
    methods: {
      init (id, dataForm) {
        let _this = this
        _this.visible = true
        if (dataForm) {//从新增或修改弹窗
          _this.instantClose = true
          _this.dataForm = dataForm
        } else {//从列表预览
          _this.instantClose = false
          _this.id = id
          _this.$nextTick(() => {
            if (id) {
              _this.$http({
                url: _this.$http.adornUrl(`/picbook/picbook/info/${id}`),
                method: 'get',
                params: _this.$http.adornParams()
              }).then(({data}) => {
                if (data && data.code === 0) {
                  _this.dataForm = data.data.pbBook
                }
              })
            }
          })
        }
      },
      updateClick () {
        this.visible = false
        if (!this.instantClose) {
          this.$emit('updatePicBook', this.id)
        }
      }
    }
  }
</script>
<style scoped lang="less">

  .coverImg-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    width: 150px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }

  .coverImg {
    width: 150px;
    height: 180px;
    display: inline-block;
  }

  .tip {
    color: black;
    font-weight: 600;
    margin-right: 20px;
  }

  .content {
    color: #999;
  }

  .summary {
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 4px;
    margin: 8px 0 12px;
  }
</style>
